<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .a {
            margin-top: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .head,
        .commodity,
        .univalence,
        .quantity,
        .subtotal,
        .operation,
        .heads,
        .commoditys,
        .univalences,
        .quantitys,
        .subtotals,
        .operations {
            width: 100px;
            height: 50px;
            border: 1px rgb(112, 97, 97) solid;
            display: inline-block;
            text-align: center;
            line-height: 50px;
        }

        .commodity,
        .commoditys {
            width: 500px;
        }

        .univalence,
        .univalences {
            width: 200px;
        }

        .quantity,
        .quantitys {
            width: 150px;
        }

        .subtotal,
        .subtotals {
            width: 250px;
        }

        .operation,
        .operations {
            width: 150px;
        }

        .b {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .heads,
        .commoditys,
        .univalences,
        .quantitys,
        .subtotals,
        .operations {
            height: 200px;
            line-height: 200px;
        }

        img {
            width: 180px;
            height: 160px;
            margin-top: 20px;
        }

        .commoditys {
            display: flex;
            justify-content: center;

        }

        .amount {
            padding: 0 10px;
            border: 1px rgb(117, 105, 105) solid;
        }

        .c {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
        }

        .digit {
            color: red;
        }

        .footing {
            margin-left: 10px;
        }

        .c1 {
            border: 1px rgb(112, 97, 97) solid;
            padding: 14px 4px 14px 0;
        }

        .c2 {
            width: 150px;
            height: 50px;
            border: 1px rgb(112, 97, 97) solid;
            line-height: 50px;
            text-align: center;
        }

        .delete {
            margin-left: 948px;
        }

        .quantitys {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .quantitys span {
            width: 20px;
            height: 26px;
            line-height: 26px;
            background-color: #ff0;
        }

        .quantitys .off {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <div class="cart">
        <div class="a">
            <span class="head">
                <input type="checkbox" class="cheone">全选
            </span>
            <p class="commodity">
                <span>商品</span>
            </p>
            <p class="univalence">
                <span>单价</span>
            </p>
            <p class="quantity">
                <span>数量</span>
            </p>
            <p class="subtotal">
                <span>小计</span>
            </p>
            <p class="operation">
                <span>操作</span>
            </p>
        </div>
        <ul>
            <li class="b">
                <span class="heads">
                    <input type="checkbox" class="chetwo">
                </span>
                <p class="commoditys">

                    <img src="https://img.alicdn.com/imgextra/i1/1063900183/O1CN01sedFOL1DDrESKBiB9_!!2-saturn_solar.png_468x468q75.jpg_.webp"
                        alt="">
                    <span class="">Casio/卡西欧EX-TR350</span>

                <p class="univalences">
                    <span>5999.88</span>
                </p>
                <p class="quantitys">
                    <span class="off reduce"></span>
                    <span class="amount">
                        1
                    </span>
                    <span class="add">+</span>
                </p>
                <p class="subtotals">5999.88</p>
                <p class="operations">
                    <span>删除</span>
                </p>
            </li>
            <li class="b">
                <span class="heads">
                    <input type="checkbox" class="chetwo">
                </span>
                <p class="commoditys">

                    <img src="https://img.alicdn.com/imgextra/i1/1063900183/O1CN01sedFOL1DDrESKBiB9_!!2-saturn_solar.png_468x468q75.jpg_.webp"
                        alt="">
                    <span class="">Casio/卡西欧EX-TR350</span>

                <p class="univalences">
                    <span>3888.67</span>
                </p>
                <p class="quantitys">
                    <span class="off reduce"></span>
                    <span class="amount">
                        1
                    </span>
                    <span class="add">+</span>
                </p>
                <p class="subtotals">3888.67</p>
                <p class="operations">
                    <span>删除</span>
                </p>
            </li>
            <li class="b">
                <span class="heads">
                    <input type="checkbox" class="chetwo">
                </span>
                <p class="commoditys">

                    <img src="https://img.alicdn.com/imgextra/i1/1063900183/O1CN01sedFOL1DDrESKBiB9_!!2-saturn_solar.png_468x468q75.jpg_.webp"
                        alt="">
                    <span class="">Casio/卡西欧EX-TR350</span>

                <p class="univalences">
                    <span>3456.66</span>
                </p>
                <p class="quantitys">
                    <span class="off reduce"></span>
                    <span class="amount">
                        1
                    </span>
                    <span class="add">+</span>
                </p>
                <p class="subtotals">3456.66</p>
                <p class="operations">
                    <span>删除</span>
                </p>
            </li>
        </ul>
        <div class="c">
            <p class="c1">
                <span class="del">删除</span>
                <span class="delete">
                    <span>已选商品
                        <span class="digit">2</span>
                        件
                    </span>
                    <span class="footing">
                        合计：￥
                        <span class="m">1234</span>
                    </span>
                </span>
            </p>
            <p class="c2">结算</p>
        </div>
    </div>



    <h1 style="display: none;">购物车空空</h1>

    <script>

        // 购物车注意事项
        //   1 在实现加号的时候，需要判断减号是否存在
        //   2 在实现减号的时候，需要判断数量是否等于1
        //   3 在实现删除的时候，需要重新给单选赋值 -- (数量变少了)
        //   4 实现合计的时候，封装函数，每个事件都去调用




        var oCart = document.querySelector('.cart');   // 如果在写代码过程中不断的获取元素，会非常消耗性能
        // 全选
        var oAll = oCart.querySelector('.cheone');
        // 所有的单选
        var oOnes = oCart.querySelectorAll('.chetwo');  // 3
        // 删除
        var oDels = oCart.querySelectorAll('.operations span');
        // 批量删除
        var oDelAll = oCart.querySelector('.del');
        // 加
        var oAdds = oCart.querySelectorAll('.add');
        // 减
        var oJians = oCart.querySelectorAll('.reduce');
        // 显示数量
        var oDigit = oCart.querySelector('.digit');
        // 显示合计
        var oM = oCart.querySelector('.m');


        // 全选
        oAll.onclick = function () {
            // 改变所有单选的状态
            for (var i = 0; i < oOnes.length; i++) {
                oOnes[i].checked = oAll.checked;
            }

            sum()
        }

        // 反选
        for (var i = 0; i < oOnes.length; i++) {
            oOnes[i].onclick = function () {
                // i 已经不能用
                // 判断是否所有的单选都选中    只要有一个没有选中  就不用再继续判断
                for (var j = 0; j < oOnes.length; j++) {
                    if (!oOnes[j].checked) {
                        break;
                    }
                }
                // 根据是否提前结束循环进行判断   j的值
                oAll.checked = j === oOnes.length;

                sum();
            }
        }


        // 单个删除
        for (var i = 0; i < oDels.length; i++) {
            oDels[i].onclick = function () {
                this.parentElement.parentElement.remove();

                // 单选变少了
                oOnes = oCart.querySelectorAll('.chetwo');
                sum()
            }
        }


        // 加
        for (var i = 0; i < oAdds.length; i++) {
            oAdds[i].onclick = function () {
                // 数量变
                this.previousElementSibling.innerHTML++;
                // 小计  = 单价 * 数量
                var xiaoJi = this.previousElementSibling.innerHTML * this.parentElement.previousElementSibling.children[0].innerHTML;
                this.parentElement.nextElementSibling.innerHTML = xiaoJi.toFixed(1);


                // 还需要添加减号
                // 如果没有减号就加上，如果有不管
                if (!this.previousElementSibling.previousElementSibling.innerHTML) {
                    this.previousElementSibling.previousElementSibling.innerHTML = '-';
                    this.previousElementSibling.previousElementSibling.classList.remove('off');
                }

                sum()

            }
        }

        // 减
        //   需要判断能不能减
        //     1 判断是不是灰色的  off
        //     2 判断有没有减号  -   innerHTML==='-'
        //     3 判断数量
        for (var i = 0; i < oJians.length; i++) {
            oJians[i].onclick = function () {
                // 首先判断能不能减
                // if(this.innerHTML === '-') {
                if (this.innerHTML) {
                    // 数量改变
                    this.nextElementSibling.innerHTML--;
                    // 小计  = 单价 * 数量
                    var xiaoJi = this.nextElementSibling.innerHTML * this.parentElement.previousElementSibling.children[0].innerHTML;
                    this.parentElement.nextElementSibling.innerHTML = xiaoJi.toFixed(1);


                    // 判断数量是不是1  1就不能再继续减   数据类型不一样
                    if (this.nextElementSibling.innerHTML == 1) {
                        // 去掉减号
                        this.innerHTML = '';
                        // 加上灰色
                        this.classList.add('off');
                    }

                    sum()
                }

                // 根据颜色来判断
                // if (!this.classList.contains('off')) {
                //     this.nextElementSibling.innerHTML--;
                //     // 判断数量是不是1  1就不能再继续减   数据类型不一样
                //     if (this.nextElementSibling.innerHTML == 1) {
                //         // 去掉减号
                //         this.innerHTML = '';
                //         // 加上灰色
                //         this.classList.add('off');
                //     }
                // }


            }
        }



        // 批量删除
        oDelAll.onclick = function () {
            // 遍历是否选中
            for (var i = 0; i < oOnes.length; i++) {
                if (oOnes[i].checked) {
                    oOnes[i].parentElement.parentElement.remove()

                }
            }
            // 单选变少了
            oOnes = oCart.querySelectorAll('.chetwo');
            sum()
        }









        // 求和  ---   判断是否选中
        function sum() {
            var res = 0;  // 数量
            var money = 0 ;
            // 遍历是否选中
            for (var i = 0; i < oOnes.length; i++) {
                if (oOnes[i].checked) {
                    var count = oOnes[i].parentElement.nextElementSibling.nextElementSibling.nextElementSibling.children[1].innerHTML;
                    res += count * 1;
                    money += oOnes[i].parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML * 1 ;
                }
            }
            oDigit.innerHTML = res;
            oM.innerHTML = money ;
        }



    </script>


</body>

</html>